import React, { useEffect } from 'react';

/*
  学习目标：在React中使用redux -练习- 加减count的练习
  需求：要求子组件卸载时，不销毁count的值
*/

import { useState } from 'react';
import store from './store';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 2. 使用redux中的count，作为初始值
  const [count, setCount] = useState(store.getState().count);
  useEffect(() => {
    //  🔔redux只是负责管理数据：修改state 保存state， 💥不负责驱动视图.
    // React负责驱动视图

    // 4. 挂载后，开启监听store，count变化setCount改变count
    const unFn = store.subscribe(() => {
      console.log('store.getState().count更新后的值  ----->  ', store.getState().count);
      setCount(store.getState().count);
    });
    // 5. 组件卸载时关闭监听store
    return () => {
      unFn();
    };
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 3. +1时修改redux中的数据 */}
      <button onClick={() => store.dispatch({ type: 'add' })}>+1</button>
      <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
